<template>
    <div style="text-align:left;">
        <!--订单信息-->
        <div>
            <el-row>
                <el-col :span="12">
                    <div>订单号：{{ orderMaster.orderNo }}</div>
                    <div>订单金额：<span style="color:red;font-weight:600;">{{ orderMaster.orderAmount.toFixed(2) }}</span></div>
                    <div>下单日期：{{ orderMaster.orderTime }}</div>
                </el-col>
                <el-col :span="12">
                    <div>收件人姓名：<el-input v-model="orderMaster.recivedName"></el-input></div>
                    <div>收件人电话：{{ orderMaster.recivedPhone }}</div>
                    <div>收件人地址：{{ orderMaster.recivedAddress }}</div>
                    <div>备注：{{ orderMaster.remark }}</div>
                </el-col>
            </el-row>
        </div>

        <!--商品信息-->
        <div style="margin-top:50px;">
            <el-table :data="orderDetails" style="width: 100%">
                <el-table-column prop="skuImage" label="图片" width="180"></el-table-column>
                <el-table-column prop="skuName" label="名称"></el-table-column>
                <el-table-column prop="skuNumber" label="数量" width="180"></el-table-column>
                <el-table-column prop="skuPrice" label="价格" width="180"></el-table-column>
            </el-table>
        </div>

        <!--物流信息-->
        <div style="margin-top:50px;">
            <el-timeline :reverse="false">
                <el-timeline-item v-for="(activity, index) in logisticDetails" :key="index" :timestamp="activity.deliveryTime">
                    {{ activity.context }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderMaster:{orderAmount:0},
            orderDetails: [],
            logisticDetails:[],
            reverse: true,
            activities: [{
                content: '活动按期开始',
                timestamp: '2018-04-15'
            }, {
                content: '通过审核',
                timestamp: '2018-04-13'
            }, {
                content: '创建成功',
                timestamp: '2018-04-11'
            }]
        }
    },
    mounted(){
        this.onloadData()
    },
    methods:{
        onloadData(){
            let url=this.$baseUrl +'/order/detail'
            this.$http.get(url,{
                params:{
                    orderNo:this.$route.query.id
                }
            }).then(res=>{
                if(res.data.code == 200){
                    console.log(res)
                    this.orderMaster = res.data.data.master
                    this.orderDetails = res.data.data.details
                    this.logisticDetails = res.data.data.logisticDetails
                }else{
                    this.$message.error(res.data.message)
                }
            })
            // .catch(err=>{
            //     this.$message.error("网络错误")
            // })
        }
    }
}
</script>